<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="deviceList"
      style="width: 100%;min-width: 800px;margin-top:30px;"
      border
    >
      <el-table-column align="center" label="设备号" width="100">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名" width="150">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备简介" width="200">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.bindTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleUpdateDevice(scope)">修改</el-button>
          <el-button type="danger" size="small" @click="handleDeleteDevice(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="add-button-container">
      <div class="add-button-item">
        <el-button class="add-button" type="primary" @click="handleAddDevice">添加设备</el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'更新设备信息':'添加设备信息'"
    >
      <el-form
        ref="deviceForm"
        :model="deviceForm"
        :rules="rules"
        class="add-device-container"
      >
        <el-form-item label="设备号" prop="number">
          <el-input v-model="deviceForm.number" type="text" placeholder="请输入设备号" />
        </el-form-item>
        <el-form-item label="设备名" prop="name">
          <el-input v-model="deviceForm.name" type="text" placeholder="请输入设备名" />
        </el-form-item>
        <el-form-item label="设备简介" prop="desc">
          <el-input
            v-model="deviceForm.desc"
            type="textarea"
            placeholder="设备简介"
            :autosize="{ minRows: 4, maxRows: 4 }"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <div style="text-align:right;">
          <el-button v-loading="loading" type="danger" @click="dialogVisible=false">取消</el-button>
          <el-button v-loading="loading" type="primary" @click="confirm">确认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addDevice, delDevice, getDeviceList, updateDevice } from '@/api/device'

const defaultDeviceForm = {
  number: '',
  name: '',
  desc: ''
}
export default {
  name: 'DeviceQuota',
  data() {
    return {
      loading: false,
      deviceForm: Object.assign({}, defaultDeviceForm),
      deviceList: [],
      dialogVisible: false,
      dialogType: 'new',
      listLoading: true,
      rules: {
        number: [{ required: true, message: '请输入设备号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入设备名', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入设备简介', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      getDeviceList().then((response) => {
        this.deviceList = response.data.devices
        this.listLoading = false
      })
    },
    updateDevice() {
      this.$refs.deviceForm.validate(valid => {
        if (valid) {
          this.loading = true
          updateDevice(this.deviceForm)
          this.loading = false
        } else {
          console.log('error update!!')
          return false
        }
      })
    },
    handleAddDevice() {
      this.dialogType = 'new'
      this.deviceForm = Object.assign({}, defaultDeviceForm)
      this.dialogVisible = true
    },
    handleUpdateDevice(scope) {
      this.dialogType = 'edit'
      this.deviceForm = {
        number: scope.row.number,
        name: scope.row.name,
        desc: scope.row.description
      }
      this.dialogVisible = true
    },
    handleDeleteDevice({ $index, row }) {
      this.$confirm('是否移除该设备?', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delDevice({ number: row.number })
        console.log('$index', $index)
        this.deviceList.splice($index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    async confirm() {
      const isEdit = this.dialogType === 'edit'
      if (!isEdit) {
        await addDevice(this.deviceForm).then((response) => {
          this.deviceForm = response.data.device
          this.deviceList.push(this.deviceForm)
        })
      } else {
        await this.updateDevice()
        for (let index = 0; index < this.deviceList.length; index++) {
          if (this.deviceList[index].number === this.deviceForm.number) {
            this.deviceList[index].name = this.deviceForm.name
            this.deviceList[index].description = this.deviceForm.desc
            break
          }
        }
      }
      const { number, name, desc } = this.deviceForm
      this.dialogVisible = false
      this.$notify({
        title: '操作成功',
        dangerouslyUseHTMLString: true,
        message: `
            <div>设备号: ${number}</div>
            <div>设备名: ${name}</div>
            <div>设备简介: ${desc}</div>
          `,
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>

.add-button-container {
  position: relative;
  width: 100%;
  min-width: 800px;
}

.add-button-item {
  width: 50px;
  margin: 10px auto;
}

</style>
